<template>
  <div class="demo1_container">
      <div class="price_container">
      <el-button @click="priceTop">升序</el-button>
      <el-button @click="priceDown">降序</el-button>
    </div>
      <div class="demo1_container_out" ref="onScroll">
          <div class="demo1_container_inner">
              <div class="item_container" v-for="(item,index) in list" :key="index">
                  <div class="img_container">
                      <img :src="item.productImage" >
                  </div>
                  
                  <div class="desc_container">
                      <div>{{item.productName}}</div>
                      <div>{{item.salePrice}}</div>
                      <div>
                          <el-button @click="addCart(item)">加</el-button>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="loading_container">
          <p v-show="isShow">没有更多了</p>
          <img v-show="isLoading" src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1557122104,3885355970&fm=26&gp=0.jpg">
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[],
            isLoading:false,
            isShow:false
        }
    },
    mounted(){
        this.$store.dispatch("GATADATA");
            this.list = this.$store.state.data1;
        this.$refs.onScroll.addEventListener("scroll",(e)=>{
            // clientHeight元素高
            var clientHeight = e.target.clientHeight;
            // scrollHeight总高度
            var scrollHeight = e.target.scrollHeight;
            // scrollTop 滚动距离
            var scrollTop = e.target.scrollTop;
            if(scrollTop==1685){
                this.isShow = true;
            }else{
                this.isShow = false;
            }
            if(scrollHeight - clientHeight - scrollTop ===0){
                switch (scrollTop) {
                    case 445:
                    this.isLoading = true;
                    this.$store.state.data2.forEach(el=>{
                        setTimeout(()=>{
                            this.isLoading = false;
                            this.list.push(el)
                        },3000)
                    })
                        break;
                    case 1375:
                    this.isLoading = true;
                     this.$store.state.data3.forEach(el=>{
                        setTimeout(()=>{
                            this.isLoading = false;
                            this.list.push(el)
                        },3000)
                    })
                        break;   
                    default:
                        break;
                }
            }
        })
    },
    methods:{
        addCart(item){
            if(localStorage.getItem("token")){
                this.$store.commit("ADDCART",item)
            }else{
                this.$message("你还没有登录")
            }
        },
        priceTop(){
            this.list.sort((a,b)=>{
                return b.salePrice-a.salePrice
            })
        },
        priceDown(){
            this.list.sort((a,b)=>{
                return a.salePrice -b.salePrice
            })
        }
    }
}
</script>

<style scoped>
.demo1_container
{
    width: 100%;
    height: 500px;
    /* background-color: red; */
    border: 1px solid #ddd;
}

.loading_container
{
    width: 100%;
    height: 50px;
    display: inline-flex;
    justify-content: center;
}

.loading_container img
{
    height: 100%;
}

.demo1_container_out
{
    width: 100%;
    height: 500px;
    overflow: scroll;
}

.demo1_container_inner
{
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.item_container:hover
{
    transform: scale(1.01);
    box-shadow: 2px 2px 4px 7px #fff;
}

.item_container
{
    width: 30%;
    height: 300px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    margin: 5px;
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    transition: all 1s;
}

.img_container
{
    width: 100%;
    height: 50%;
    display: inline-flex;
    justify-content: center;
}

.img_container img
{
    height: 100%;
}

.desc_container
{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
}

.desc_container > div
{
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.price_container
{
    width: 100%;
    height: 40px;
    /* border:1px solid #000; */
}

@media (min-width:780px) and (max-width: 910px) {
.item_container
{
    width: 48%;
    height: 300px;
    /* background-color: blue; */
    margin: 5px;
}
}

@media screen and (max-width: 780px) {
  .item_container
{
    width: 100%;
    height: 200px;
    /* background-color: blue; */
    margin: 5px;
}
}
</style>